<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新建租赁关系</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">


    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">

    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../address-resolver.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../common.js"></script>
</head>

<body>
<div id="app" class="container-fluid">
        <div class="form-group">
            <span>租赁房间：</span>
            <input type="text" class="form-control" placeholder="请选择租赁房间" v-model="roomNum" aria-describedby="basic-addon1" value="{{rNum}}"><br><br>
        </div>

        <div class="form-group">
            <span>客户姓名：</span>
            <input type="text" class="form-control" placeholder="请输入客户名字" v-model="customerName" aria-describedby="basic-addon1"> <br><br>
        </div>

        <div class="form-group">
            <span>证件号码：</span>
            <input type="text" class="form-control" placeholder="请输入客户证件号码" v-model="identificationNumber" aria-describedby="basic-addon1"><br><br>
        </div>

        <div class="form-group">
            <span>客户电话：</span>
            <input type="text" class="form-control" placeholder="请输入客户电话" v-model="customerPhone" aria-describedby="basic-addon1"><br><br>
        </div>


        <div class="form-group">
            <span>起租日期：</span>
            <input id="daterange" name="daterange" type="text" class="form-control"  v-model="dateOfHire" value="{{date}}"><br/><br/>
        </div>

        <div class="form-group">
            <span>租用网络：</span>
            <select v-model="isNetwork">
                <option value="0" selected="selected">是</option>
                <option value="1">否</option>
            </select><br/><br/>
        </div>

        <div class="form-group">
            <span>基础房租：</span>
            <input type="text" class="form-control" v-model="baseRent" placeholder="请输入基础房租" aria-describedby="basic-addon1"><br><br>
        </div>

        <div class="form-group">
            <span>押&nbsp;&nbsp&nbsp;&nbsp;&nbsp;金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</span>
            <input type="text" class="form-control" placeholder="请输入押金"  v-model="deposit" aria-describedby="basic-addon1"><br><br>
        </div>

        <div class="form-group">
            <span>备注信息：</span>
            <input type="text" class="form-control" placeholder="请输入备注" v-model="info" aria-describedby="basic-addon1"><br><br>
        </div>

        <button type="submit" @click="submit" class="{{brand_button?'btn btn-default':'btn btn-default disabled' }}">提交</button>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;
        <button type="submit" @click="cancel" class="{{brand_button?'btn btn-default':'btn btn-default disabled' }}">取消</button>

</div>

<script>//首先使用一个闭包,防止污染全局对象


(function () {

    var Request = GetRequest();

    //定义页面的mvvm对象,用法参考 vuejs框架
    var vm = new Vue(
        {
            el: "#app",
            data: {
                //日期
                date:"",
                roomlist:[],
                roomNum:'',//房间号
                customerName:'',//客户名字
                identificationNumber:'',//证件号
                customerPhone:'',//客户电话
                dateOfHire:'',//起租日期
                isNetwork:'',//是否使用网路
                baseRent:'',//基本房租
                deposit:'',//押金
                info:'',//备注信息
                roomNos:[],
                roomNoSelected:undefined,
                rNum:Request.roomNum

            },
            created: function () {
                this.loadData();
            },
            watch: {

            },
            methods: {
                loadData: function () {

                },
                submit:function(){
                    var hasNet;
                    if(this.isNetwork=="是"){
                        hasNet=true;
                    }else{
                        hasNet=false;
                    };
                    var data={
                        roomName:this.roomNum,
                        customerName:this.customerName,
                        customerId:this.identificationNumber,
                        customerTel:this.customerPhone,
                        startDate:this.dateOfHire,
                        hasNet:hasNet,
                        basePayment:this.baseRent,
                        deposit:this.deposit,
                        otherInfo:this.info
                    };
                   /* if(this.roomNum==null){
                      alert("请输入房间号");
                    }
                    if(this.customerName==null){
                        alert("请输入客户姓名");
                    }
                    if(this.identificationNumber==null){
                        alert("请输入客户证件号");
                    }
                    if(this.customerPhone==null){
                        alert("请输入客户电话");
                    }
                    if(this.dateOfHire==null){
                        alert("请输入起租日期");
                    }
                    if(hasNet==null){
                        alert("请选择是否使用网络");
                    }
                    if(this.baseRent==null){
                        alert("请输入基本房租");
                    }
                    if(this.deposit==null){
                        alert("请输入押金");
                    }
                    if(this.info==null){
                        alert("请输入备注信息");
                    }*/

                    getRental(data,function () {
                        window.location.href="../info/emptyRoom.html";
                    })
                },
                cancel:function () {
                    window.location.href="../common/billing.html";
                }

            }

        });

   function getRoomNo(param, cp){
        $.get("/rental/roomList", param, cp);
   }
    function getList(param, cp) {
        $.get("/room/list", param, cp);
    }
    function getRental(param, cp){
       $.post("/rental/add", param, cp);
    }

    $('input[name="daterange"]').daterangepicker({
        singleDatePicker: true,
        format: 'YYYY-MM-DD'
    }, function () {

    });

})();
</script>
</body>

</html>